/*
 * ! Ext JS Library 3.0.0 Copyright(c) 2006-2009 Ext JS, LLC licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ux.GroupTab = Ext.extend(Ext.Container, {
	mainItem : 0,

	expanded : true,

	deferredRender : true,

	activeTab : null,

	idDelimiter : '__',

	headerAsText : false,

	frame : false,

	hideBorders : true,

	initComponent : function(config) {
		Ext.apply(this, config);
		this.frame = false;

		Ext.ux.GroupTab.superclass.initComponent.call(this);

		this.addEvents('activate', 'deactivate', 'changemainitem',
				'beforetabchange', 'tabchange');

		this.setLayout(new Ext.layout.CardLayout({
					deferredRender : this.deferredRender
				}));

		if (!this.stack) {
			this.stack = Ext.TabPanel.AccessStack();
		}

		this.initItems();

		this.on('beforerender', function() {
					this.groupEl = this.ownerCt.getGroupEl(this);
				}, this);

		this.on('add', this.onAdd, this, {
					target : this
				});
		this.on('remove', this.onRemove, this, {
					target : this
				});

		if (this.mainItem !== undefined) {
			var item = (typeof this.mainItem == 'object')
					? this.mainItem
					: this.items.get(this.mainItem);
			delete this.mainItem;
			this.setMainItem(item);
		}
	},

	/**
	 * Sets the specified tab as the active tab. This method fires the
	 * {@link #beforetabchange} event which can return false to cancel the tab
	 * change.
	 * 
	 * @param {String/Panel}
	 *            tab The id or tab Panel to activate
	 */
	setActiveTab : function(item) {
		item = this.getComponent(item);
		if (!item
				|| this
						.fireEvent('beforetabchange', this, item,
								this.activeTab) === false) {
			return;
		}
		if (!this.rendered) {
			this.activeTab = item;
			return;
		}
		if (this.activeTab != item) {
			if (this.activeTab && this.activeTab != this.mainItem) {
				var oldEl = this.getTabEl(this.activeTab);
				if (oldEl) {
					Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
				}
				this.activeTab.fireEvent('deactivate', this.activeTab);
			}
			var el = this.getTabEl(item);
			Ext.fly(el).addClass('x-grouptabs-strip-active');
			this.activeTab = item;
			this.stack.add(item);

			this.layout.setActiveItem(item);
			if (this.layoutOnTabChange && item.doLayout) {
				item.doLayout();
			}
			if (this.scrolling) {
				this.scrollToTab(item, this.animScroll);
			}

			item.fireEvent('activate', item);
			this.fireEvent('tabchange', this, item);
		}
	},

	getTabEl : function(item) {
		if (item == this.mainItem) {
			return this.groupEl;
		}
		return Ext.TabPanel.prototype.getTabEl.call(this, item);
	},

	onRender : function(ct, position) {
		Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);

		this.strip = Ext.fly(this.groupEl).createChild({
					tag : 'ul',
					cls : 'x-grouptabs-sub'
				});

		this.tooltip = new Ext.ToolTip({
			target : this.groupEl,
			delegate : 'a.x-grouptabs-text',
			trackMouse : true,
			renderTo : document.body,
			listeners : {
				beforeshow : function(tip) {
					var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
							? this.mainItem
							: this.findById(tip.triggerElement.parentNode.id
									.split(this.idDelimiter)[1]);

					if (!item.tabTip) {
						return false;
					}
					tip.body.dom.innerHTML = item.tabTip;
				},
				scope : this
			}
		});

		if (!this.itemTpl) {
			var tt = new Ext.Template(
					'<li class="{cls}" id="{id}">',
					'<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>',
					'</li>');
			tt.disableFormats = true;
			tt.compile();
			Ext.ux.GroupTab.prototype.itemTpl = tt;
		}

		this.items.each(this.initTab, this);
	},

	afterRender : function() {
		Ext.ux.GroupTab.superclass.afterRender.call(this);

		if (this.activeTab !== undefined) {
			var item = (typeof this.activeTab == 'object')
					? this.activeTab
					: this.items.get(this.activeTab);
			delete this.activeTab;
			this.setActiveTab(item);
		}
	},

	// private
	initTab : function(item, index) {
		var before = this.strip.dom.childNodes[index];
		var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);

		if (item === this.mainItem) {
			item.tabEl = this.groupEl;
			p.cls += ' x-grouptabs-main-item';
		}

		var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl
				.append(this.strip, p);

		item.tabEl = item.tabEl || el;

		item.on('disable', this.onItemDisabled, this);
		item.on('enable', this.onItemEnabled, this);
		item.on('titlechange', this.onItemTitleChanged, this);
		item.on('iconchange', this.onItemIconChanged, this);
		item.on('beforeshow', this.onBeforeShowItem, this);
	},

	setMainItem : function(item) {
		item = this.getComponent(item);
		if (!item
				|| this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
			return;
		}

		this.mainItem = item;
	},

	getMainItem : function() {
		return this.mainItem || null;
	},

	// private
	onBeforeShowItem : function(item) {
		if (item != this.activeTab) {
			this.setActiveTab(item);
			return false;
		}
	},

	// private
	onAdd : function(gt, item, index) {
		if (this.rendered) {
			this.initTab.call(this, item, index);
		}
	},

	// private
	onRemove : function(tp, item) {
		Ext.destroy(Ext.get(this.getTabEl(item)));
		this.stack.remove(item);
		item.un('disable', this.onItemDisabled, this);
		item.un('enable', this.onItemEnabled, this);
		item.un('titlechange', this.onItemTitleChanged, this);
		item.un('iconchange', this.onItemIconChanged, this);
		item.un('beforeshow', this.onBeforeShowItem, this);
		if (item == this.activeTab) {
			var next = this.stack.next();
			if (next) {
				this.setActiveTab(next);
			} else if (this.items.getCount() > 0) {
				this.setActiveTab(0);
			} else {
				this.activeTab = null;
			}
		}
	},

	// private
	onBeforeAdd : function(item) {
		var existing = item.events ? (this.items.containsKey(item.getItemId())
				? item
				: null) : this.items.get(item);
		if (existing) {
			this.setActiveTab(item);
			return false;
		}
		Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
		var es = item.elements;
		item.elements = es ? es.replace(',header', '') : es;
		item.border = (item.border === true);
	},

	// private
	onItemDisabled : Ext.TabPanel.prototype.onItemDisabled,
	onItemEnabled : Ext.TabPanel.prototype.onItemEnabled,

	// private
	onItemTitleChanged : function(item) {
		var el = this.getTabEl(item);
		if (el) {
			Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
		}
	},

	// private
	onItemIconChanged : function(item, iconCls, oldCls) {
		var el = this.getTabEl(item);
		if (el) {
			Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls,
					iconCls);
		}
	},

	beforeDestroy : function() {
		Ext.TabPanel.prototype.beforeDestroy.call(this);
		this.tooltip.destroy();
	}
});

Ext.reg('grouptab', Ext.ux.GroupTab);
